<template>
    <div class="new">
        <div class="headerr">
            <span class="shouye" @click="$router.push('/proportal/index')">首页 /</span>
            <span>绩效考核管理</span>
        </div>
        <div class="xuan">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" label-position="top" class="demo-ruleForm">
                <el-form-item label="被考核人">
                    <el-input v-model="ruleForm.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="被考核人部门">
                    <el-input v-model="ruleForm.department" size="small" suffix-icon="el-icon-search"></el-input>
                </el-form-item>
                <el-form-item label="考核周期">
                    <el-date-picker
                        v-model="ruleForm.range"
                        type="daterange"
                        size="small"
                        style="width: 100%;"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="考核人"  v-show="showMore">
                    <el-input v-model="ruleForm.name1" size="small"></el-input>
                </el-form-item>
                <el-form-item label="考核人部门"  v-show="showMore">
                    <el-input v-model="ruleForm.department1" size="small" suffix-icon="el-icon-search"></el-input>
                </el-form-item>
                <el-form-item label="流程状态"  v-show="showMore">
                    <el-select v-model="ruleForm.type" size="small" placeholder="请选择" style="width: 100%;">
                        <el-option
                        v-for="item in types"
                        suffix-icon="el-icon-search"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="领导评分"  v-show="showMore">
                    <el-input-number v-model="ruleForm.min" size="small" controls-position="right" style="width: 120px;margin-right: 6px;" :min="1" placeholder="最小值"></el-input-number>
                    ——
                    <el-input-number v-model="ruleForm.max" size="small" controls-position="right" style="width: 120px;margin-left: 6px;" :min="1" placeholder="最大值"></el-input-number>
                </el-form-item>
            </el-form>
            <div class="operation">
                <div class="show" v-show="!showMore" @click="showMore = true">
                    <span>展开</span>
                    <i class="el-icon-arrow-down"></i>
                </div>
                <div class="unshow" v-show="showMore" @click="showMore = false">
                    <span>收起</span>
                    <i class="el-icon-arrow-up"></i>
                </div>
                <el-button size="small" type="primary">查询</el-button>
                <el-button size="small">重置</el-button>
            </div>
        </div>
        <div class="table">
            <div class="table-top">
                <el-button size="small" type="primary">绩效考核填写</el-button>
                <el-button size="small">导出</el-button>
                <el-button size="small">导出记录</el-button>
            </div>
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                tooltip-effect="dark"
                style="width: 100%">
                <el-table-column
                    type="index"
                    label="序号"
                    width="55">
                </el-table-column>
                <el-table-column label="考核开始日期"   width="130"></el-table-column>
                <el-table-column label="考核结束日期"    width="130"></el-table-column>
                <el-table-column label="被考核人"   width="110"></el-table-column>
                <el-table-column label="被考核人部门"   width="130"></el-table-column>
                <el-table-column label="自评得分"   width="110"></el-table-column>
                <el-table-column label="自评等级"   width="110"></el-table-column>
                <el-table-column label="考核人"   width="100"></el-table-column>
                <el-table-column label="考核人部门"   width="130"></el-table-column>
                <el-table-column label="领导评分"   width="110"></el-table-column>
                <el-table-column label="领导评级"   width="110"></el-table-column>
                <el-table-column label="更新时间"   width="110"></el-table-column>
                <el-table-column label="流程状态"   width="110"></el-table-column>
                <el-table-column label="操作" width="50" fixed="right"></el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100]"
                :current-page.sync="pageinfo.page"
                :page-size="pageinfo.page_size"
                layout="total, sizes, prev, pager, next"
                :total="pageinfo.total"
                style="margin-bottom: 10px; margin-top: 10px"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default{
    name:'kpim',
    data() {
        return {
            tableData: [],
            pageinfo: {
                page: 1,
                page_size: 20,
                total: 20,
                page_sizes: [10, 20, 30, 50],
            },
            ruleForm: {},
            types: ['审批通过', '审批终止', '审批中', '待提交'],
            showMore: false,
        }
    },
    methods:{
        handleCurrentChange(current) {
            this.pageinfo.page = current;
        },
        handleSizeChange(val) {
            this.pageinfo.page_size = val;
        },
    }
}
</script>
<style lang="less" scoped>
.new{
    width: 100%;
    .headerr{
        font-size: 14px;
        .shouye{
            color: rgba(0, 0, 0, 0.45);
            cursor: pointer;
            margin-right: 6px;
        }
    }
    .xuan{
        margin: 16px 0;
        padding: 24px;
        width: 100%;
        background-color: #fff;
        border-radius: 8px;
        display: flex;
        .el-form {
            flex:1;
            display: flex;
            flex-wrap: wrap;
            .el-form-item{
                width: 33%;
                padding: 0 10px;
            }
            /deep/ .el-date-editor .el-range-separator{
                width: 22px;
            }
        }
        .operation{
            width: 200px;
            .show,.unshow{
                display: inline-block;
                margin-right: 8px;
                cursor: pointer;
            }
        }
    }
    .table{
        margin-top: 16px;
        padding: 24px 24px 14px;
        background-color: #fff;
        .table-top{
            margin-bottom: 16px; 
        }
        .el-pagination{
            text-align: right;
        }
    }
}
</style>